<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Blog登录</title>
    <link rel="icon" href="../static/image/titleImage.png" type="image/x-icon"/>
    <script src="../static/js/jquery/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap-3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/js/bootstrap-3.3.7/css/bootstrap-dialog.min.css">
    <link rel="stylesheet" href="../static/js/bootstrap-3.3.7/css/bootstrap.css">
    <script src="../static/js/bootstrap-3.3.7/js/bootstrap-dialog.min.js"></script>
    <script src="../static/js/vue/vue.js"></script>
    <script src="../static/js/vue/vue-resource.js"></script>
    <script src="../static/js/mockjs/mock.js"></script>
</head>
<body>
<div class="container">
    <div style="padding-top: 100px;"/>

    <div class="form row" id="vue-login">
        <div class="form-horizontal col-sm-offset-3 col-md-offset-3" name="login_form" id="login_form">
            <h3 class="form-title">登录</h3>
            <div class="col-sm-9 col-md-9">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Username" name="username"
                           id="login_username" v-model="usernameOrEmail" autofocus="autofocus" maxlength="50"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" name="password"
                           id="login_password" v-model="password" maxlength="30"/>
                </div>
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" name="remember" value="true"/> Remember me
                    </label>
                    <hr/>
                    <a href="./register.html" id="register_btn" class="">Create an account</a>
                </div>
                <div class="form-group">
                    <!--<input type="submit" class="btn btn-success pull-right" value="Login" onclick="submitLoginForm();"-->
                    <!--id="login_submit"/>-->
                    <button v-on:click="login" class="btn btn-success pull-right">Login</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const loginUrl = "http://localhost:8090/blog/user/login";

    let login = new Vue({
        el: "#vue-login",
        data: {
            usernameOrEmail: "dmj1161859184@126.com",
            password: "123"
        },
        methods: {
            login () {
                Vue.http.post(loginUrl,{
                    email: this.usernameOrEmail,
                    password: this.password
                },).then(function (response) {
                    debugger;
                    console.log("成功返还:"+response);
                    var body = response.body;
                    console.log("body:"+body);
                    if (body.status==='SUCCESS'){
                        alert("登录成功!")
                    }
                },function (error) {
                    console.log("错误返还:"+error);
                })
            }
        },
        computed: {}
    });
</script>
</html>